<template>
  <div class="archives-wrap">
    <div class="archives-year-wrap">
      <h2>{{ year }}</h2>
    </div>
    <ul>
      <li
        v-for="blog in blogs"
        class="archives-article"
        @click="router.push('/blogs/reader/' + Object.values(blog)[0][1])">
        <div class="archives-article-date-wrap">
          <span>{{ Object.keys(blog)[0] }}</span>
        </div>
        <a class="archives-article-title">{{ Object.values(blog)[0][0] }}</a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router"
const router = useRouter()
const { year, blogs } = defineProps({
  year: {
    type: String,
    required: true,
  },
  blogs: {
    type: Object,
    required: true,
  },
})
</script>

<style scoped>
.archives-wrap {
  padding: 0 40px;
}

.archives-year-wrap {
  margin-bottom: 2em;
  position: relative;
}

.archives-year-wrap:before {
  content: "";
  width: 100%;
  border-bottom: 1px solid #eee;
  position: absolute;
  bottom: -15px;
  transition: 1s;
}

.archives-year-wrap:after {
  content: "";
  position: absolute;
  background: var(--primary);
  width: 1em;
  height: 7px;
  bottom: -18px;
  left: 0;
  border-radius: 10px;
  box-shadow: var(--shadow);
  transition: 0.3s;
}

.archives-year-wrap:hover:after {
  width: 3em;
}

.archives-article {
  padding: 0 0 20px 25px;
  display: flex;
  align-items: center;
}

.archives-article:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 15px;
  background: var(--primary);
  margin: -2px 11px 0 -25px;
  box-shadow: var(--shadow);
  opacity: 0.5;
  transition: var(--transition);
  flex-shrink: 0;
}

.archives-article-date-wrap {
  flex-shrink: 0;
}

.archives-article-title {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  color: var(--primary);
  transition: 0.3s;
  opacity: 0.7;
  margin-left: 15px;
}

.archives-article:hover::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 1;
}

.archives-article:hover {
  cursor: pointer;
}

.archives-article:hover .archives-article-title {
  opacity: 1;
}
</style>
